<template>
	<view class='pages'>
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view v-if="list.length == 0">
				<view style="height: 100upx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes" v-for="(item,index) in list" :key="index">
				<view class="uniBtn title">
					<view>余额明细</view>
					<view>{{item.price}}</view>
				</view>
				<view class="uniBtn time">
					<view>{{item.title}}</view>
					<view>{{item.add_time}}</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				length: true,
				list: []
			}
		},
		async onLoad() {
			await this.getList();
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉')
				// 关闭下拉
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 列表
			async getList() {
				let res = await this.$api.pricelist({
					uid:uni.getStorageSync("tokenUid"),
					page: this.page,
					listRows: this.limit,
				});
				if (res.code == 200) {
					this.length = res.data.length == this.limit;
					this.list.push(...res.data);
					// 关闭下拉
					uni.stopPullDownRefresh();
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.pages {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.contentbox {
		flex: 1;
		overflow: hidden;
		padding: 30upx;

		.boxes {
			padding: 30upx 20upx;
			margin-bottom: 30upx;
			position: relative;
			background: #fff;
			border-radius: 5upx;

			.title {
				font-weight: bold;

				view {
					&:nth-child(1) {
						font-size: 30upx;
						color: #000;
					}

					&:nth-child(2) {
						font-size: 36upx;
						color: #FC6CA7;
					}
				}
			}

			.time {
				font-size: 24upx;
				color: #818181;
				margin-top: 12upx;
			}
		}
	}
</style>
